Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Support manual redaction #2433

Merged
merged 101 commits into from
Jan 6, 2025

Conversation

omar-ahmed42
Copy link
Contributor

Description

Manual Redaction:

  • Text Selection-based redaction:

    • image
    • Users can now redact currently selected text by selecting the text then clicking ctrl + s shortcut or by pressing on apply/save/disk icon in the toolbar.
    • Users can delete/cancel the redacted area by clicking on the box containing the text, then clicking on delete/trash icon or by using the shortcut delete.
    • Users can customize the color of the redacted area/text (after the redaction was applied) by simply clicking on the box containing the text/area then clicking on the color palette icon and choosing the color they want.
    • Users can choose to select the color of redaction before redacting text or applying changes (this only affects newly created redaction areas, to change the color of an existing one; check the previous bullet point).
  • Draw/Area-based redaction:

    • image
    • Users can now redact an area in the page by selecting the then clicking ctrl + s shortcut or by pressing on apply/save/disk icon in the toolbar.
    • Users can delete/cancel the redacted area by clicking on the drawn box, then clicking on delete/trash icon or by using the shortcut delete (requires temporarily turning off drawing mode).
    • Users can customize the color of the redacted area (after the redaction was applied) by simply clicking on the box containing the area then clicking on the color palette icon and choosing the color they want.
    • Users can choose to select the color of redaction before drawing the box or applying changes (this only affects newly created redaction areas, to change the color of an existing one; check the previous bullet point).
  • Page-based redaction:

    • image
    • Users can now redact ENTIRE pages by specifying the page number(s), range(s) or functions.
    • Users can customize the color of page-based redaction (doesn't affect text-based nor draw-based redactions).

Redaction modes:

There are three modes of redaction/operation currently supported

  • Text Selection-based redaction (TEXT)
  • Draw/Area-based redaction (DRAWING)
  • None - by simply not choosing any of the above modes (NONE).

How to use:

  • Text Selection-based redaction: click on this icon in the toolbar image to enable text-selection redaction mode then select the text you want to redact then press ctrl + s or click on the disk/save icon image.

  • Draw/Area-based redaction: click on this icon in the toolbar image to enable draw/area-based redaction then left mouse click (LMB) on the starting point of the rectangle, then once you are satisfied with the rectangle's placement/dimensions then left mouse click (LMB) again to apply the redaction.

    • Example: Left mouse click (LMB) then move mouse to the right then bottom then Left mouse click (LMB).
    • Note: Red box/rectangle borders indicate that you have not yet saved (you need to left click on the page to save) image once saved the borders will become green image (they also become clickable/hover-able when drawing mode is off).
  • Page-based redactions:: Insert the page number(s), range(s) and/or functions (separated by ,) then select your preferred color and click on Redact to submit.
    image

  • Color Customizations:

    • You can change the redaction color for new redactions by clicking on this icon in the toolbar image.
    • You can change the redaction color for existing redactions by hovering over the redaction box then clicking on it (Left mouse click LMB) then clicking on color palette (highlighted in red in the picture) image then select your preferred color.
  • Deletions:

    • You can delete a redacted area by hovering over the redaction box then clicking on it (Left mouse click LMB) then clicking on the trash icon (highlighted in red in the picture) image.

Card in the home page:

image

Closes #465

Checklist

  • I have read the Contribution Guidelines
  • I have performed a self-review of my own code
  • I have attached images of the change if it is UI based
  • I have commented my code, particularly in hard-to-understand areas
  • If my code has heavily changed functionality I have updated relevant docs on Stirling-PDFs doc repo
  • My changes generate no new warnings
  • I have read the section Add New Translation Tags (for new translation tags only)

- Add redact.html which contains the nav-bar, file chooser, outer container and print container (used by PDF.JS viewer) and lastly the footer.
- Add redact.css which is used specifically to style redaction operation and the redaction page (except for PDF.js viewer).
- Add viewer-redact.css which is used to style PDF.js viewer that's used in the page (Changed the background to correspond with Stirling's themes).
- Add redact.js which contains the redaction related logic.
- Add submit button.
- Add hidden redactions input.
- Rename fileSelector from pdf-upload to fileInput.
- Scale x, y, width and height to match PDF page points accurately.
- Fix formula for redaction points and dimensions as x, y, height and width should be the original width rather than the width after adjusting it to the zoom level (zoom level is mainly used for correct display positioning, while scale factor is used for correct positioning in the actual PDF).
- Slightly refactor redact.js for more readability and to reduce code duplication.
…ion-based Redaction mode buttons

- Now, when one button is clicked, the other is automatically deselected, ensuring only one mode can be active at a time.
- Support page-based redactions by providing page numbers, page ranges and functions.
- Rename pageNumbers's input id to be more meaningful
- Handle cases when `n` is followed by one or more `n`s consecutively, examples: nn, nnn, nnnn.
- Handle round brackets multiplication case, examples: (n-1)n, n(n-1), (n-1)(n-2), 2(n).
- Remove spaces from N functions to prepare them for evaluation.
- Handle closing bracket pattern for N Functions examples: (n-1)n, (n-1)9, (n-1)(n-2)
- Hovering over sidebar thumbnails covers the thumbnail with the selected redaction color.
- Redacted thumbnails are surrounded with a small blue border to distinguish it from other pages.
@reecebrowne
Copy link
Contributor

/deploypr

Copy link
Contributor

github-actions bot commented Jan 2, 2025

🚀 PR Test Deployment

Your PR has been deployed for testing!

🔗 Test URL: http://185.252.234.121:2433

This deployment will be automatically cleaned up when the PR is closed.

@reecebrowne
Copy link
Contributor

Hey mate, great updates! We have tested on Safari and your fix is working perfectly now.

Is there any chance you could look in to improving the tool for creating box redactions? The click and drag mechanic as it is isn't very user friendly.

@omar-ahmed42
Copy link
Contributor Author

Hey mate, great updates! We have tested on Safari and your fix is working perfectly now.

Is there any chance you could look in to improving the tool for creating box redactions? The click and drag mechanic as it is isn't very user friendly.

Hey, sure! I will look into it.

- Detect when a box is in the process of being drawn.
- Detect pointer release even when present out of page.
- Correctly draw the box when the pointer leaves the page.
Copy link
Contributor

github-actions bot commented Jan 3, 2025

🚀 Translation Verification Summary

🔄 Reference Branch: pr-branch-messages_en_GB.properties

📃 File Check: messages_en_GB.properties

  1. Test Status:Passed
  2. Test Status:Passed

✅ Overall Check Status: Success

Thanks @omar-ahmed42 for your help in keeping the translations up to date.

@omar-ahmed42
Copy link
Contributor Author

Now, you can use click and drag mechanism.

@reecebrowne
Copy link
Contributor

/deploypr

Copy link
Contributor

github-actions bot commented Jan 5, 2025

🚀 PR Test Deployment

Your PR has been deployed for testing!

🔗 Test URL: http://185.252.234.121:2433

This deployment will be automatically cleaned up when the PR is closed.

@reecebrowne
Copy link
Contributor

Now, you can use click and drag mechanism.

This is a huge upgrade, thanks!

Copy link
Contributor

github-actions bot commented Jan 6, 2025

🚀 Translation Verification Summary

🔄 Reference Branch: pr-branch-messages_en_GB.properties

📃 File Check: messages_en_GB.properties

  1. Test Status:Passed
  2. Test Status:Passed

✅ Overall Check Status: Success

Thanks @omar-ahmed42 for your help in keeping the translations up to date.

@Frooodle
Copy link
Member

Frooodle commented Jan 6, 2025

/deploypr

Copy link
Contributor

github-actions bot commented Jan 6, 2025

🚀 PR Test Deployment

Your PR has been deployed for testing!

🔗 Test URL: http://185.252.234.121:2433

This deployment will be automatically cleaned up when the PR is closed.

@Frooodle Frooodle merged commit 22af79a into Stirling-Tools:main Jan 6, 2025
8 checks passed
@Frooodle
Copy link
Member

Frooodle commented Jan 6, 2025

Merged!!
Thanks again for this! Huge feature and lots of good work!

@Frooodle
Copy link
Member

Frooodle commented Jan 6, 2025

Ive created a info doc at
https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/Functionality/Page-Operations/redact.md

Using the PR description you did
Will eventually need to add images and clean up the doc a bit but should be a good starting doc

https://docs.stirlingpdf.com/Functionality/Page-Operations/redact

@omar-ahmed42
Copy link
Contributor Author

Fantastic! I should update the docs to reflect the changes we made in this PR, because we changed a lot of things from the PR's description, but yes, it should be a good starting doc

@omar-ahmed42
Copy link
Contributor Author

Will eventually need to add images and clean up the doc a bit but should be a good starting doc

Images/GIFs and a few additions to the docs have been added in #48

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API API-related issues or pull requests Back End Issues related to back-end development enhancement New feature or request Front End Issues or pull requests related to front-end development Java Pull requests that update Java code size:XXL This PR changes 1000+ lines, ignoring generated files. Translation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feature request] anonymize PDFs via UI redaction (Drawing black rectangle etc)
3 participants